<template>
    <div class="father">
        <p>父组件</p>
        <button @click="methodAA">父调用子方法</button>
        <br />
        <a v-bind:href="url">跳转链接</a><br />
        <aa ref="aa" :msgA="msgA" @msgAA="receive" :msgAAA="msgAAA" @methodA="methodA" :methodA="methodA"></aa>
        <p>今天天气很{{ weather }}</p>
        <button @click="switchWeather">切换天气</button>
    </div>
</template>

<script>
import aa from '@/views/componentTest/aa'

export default {
    components: {
        aa
    },
    data() {
        return {
            msgA: '父传子',
            msgAAA: '父传孙',
            url: 'about',
            isHost: true
        }
    },
    methods: {
        receive(msgAA) {
            // console.log("父接收子数据:" + msgAA)
        },
        methodA() {
            this.$message('我是父方法')
        },
        methodAA() {
            this.$refs.aa.methodAA3()
        },
        switchWeather() {
            this.isHost = !this.isHost
        }
    },
    computed: {
        weather() {
            return this.isHost ? '炎热' : '凉爽'
        }
    },
    watch: {
        isHost: {
            // 普通监听
            // immediate: true,
            // 深度监听
            deep: true,
            handler(newValue, oldValue) {
                // console.log("值被改变",newValue,oldValue)
            }
        }
        // 简写
        /*isHost(newValue,oldValue){
      console.log("值被改变",newValue,oldValue)
    }*/
    }
}
</script>

<style scoped>
.father {
    width: 500px;
    height: 800px;
    background-color: red;
}
</style>
